<template>
  <view class="content">
    <u-navbar
      title="消息"
      leftIconColor="#f8f8f8"
      :placeholder="true"
      bgColor="#f8f8f8"
    >
    </u-navbar>
    <view class="chat">
      <view class="chatitem">
        <view class="background">
          <img src="../../static/chat1.png" alt="" />
        </view>
        <view class="chatitem1">
          <view class="chatitem_left">
            <view class="chatitem_1">活动消息</view>
            <view class="chatitem_2">
              <text class="chatitem_t1">重磅消息:</text>
              <text class="chatitem_t2">新农人</text>
            </view>
          </view>
          <view class="chatitem_right">
            <view class="time">10: 16</view>
            <view class="dian"></view>
          </view>
        </view>
      </view>
      <view class="chatitem" @click="msgdetail">
        <view class="background">
          <img src="../../static/chat1.png" alt="" />
        </view>
        <view class="chatitem1">
          <view class="chatitem_left">
            <view class="chatitem_1">新农人</view>
            <view class="chatitem_2">
              <text class="chatitem_t1">可以的,没问题</text>
            </view>
          </view>
          <view class="chatitem_right">
            <view class="time">10: 10</view>
            <view class="dian1">5</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    msgdetail() {
      uni.navigateTo({
        url: "/pages/category/messagedetails",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  font-family: "Poppins";
  background-color: #f5f5f5;
  padding: 20rpx;
  height: 100vh;
}

.chat {
  width: 100%;
  background-color: #fff;
  border-radius: 20rpx;

  .chatitem {
    padding: 20rpx 25rpx;
    display: flex;

    .background {
      width: 100rpx;
      height: 100rpx;
      margin-right: 15rpx;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .chatitem1 {
      flex: 1;
      display: flex;
      align-items: center;

      .chatitem_left {
        flex: 1;

        .chatitem_1 {
          font-size: 30rpx;
          font-weight: 600;
          color: #3d3d3d;
        }

        .chatitem_t1 {
          font-size: 28rpx;
          color: #8d8683;
          display: inline-block;
          margin-right: 10rpx;
        }

        .chatitem_t2 {
          font-size: 26rpx;
          color: #adadad;
        }
      }

      .chatitem_right {
        .time {
          font-size: 28rpx;
          color: #adadad;
          margin-bottom: 10rpx;
          text-align: center;
        }

        .dian {
          width: 10rpx;
          height: 10rpx;
          background-color: red;
          border-radius: 50%;
          margin: 0 auto;
        }

        .dian1 {
          width: 40rpx;
          height: 40rpx;
          background-color: red;
          border-radius: 50%;
          margin: 0 auto;
          font-size: 20rpx;
          text-align: center;
          line-height: 40rpx;
          color: #fff;
        }
      }
    }
  }
}
</style>